<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>v-on指令</h1>
    <h2>v-on指令用于绑定事件处理函数，语法为：v-on:事件名="函数名"</h2>
    <ul>
        <li>函数名可以不加括号，vue会自动进行方法绑定。</li>
        <li>函数推荐定义在methods里面，如果定义在全局（window）也可以绑定上，但是不推荐。</li>
    </ul>
    <h2>关于绑定事件时的实际参数问题</h2>
    <ul>
        <li>如果handleClick没有加上括号，那么默认会将事件对象，作为第一个实际参入传入。</li>
        <li>可以使用<mark>$event</mark>作为占位符，写明为事件对象。</li>
        <li>传入其它参数：vue可以把任意数据类型，传递给事件绑定函数。</li>
    </ul>
    <h2>事件绑定修饰符</h2>
    <p>修饰符用于描述指令的细节，事件修饰符重要用于阻止事件默认行为和阻止事件冒泡。</p>
    <p>语法：v-on:事件名.修饰符</p>
    <ul>
        <li>prevent：阻止事件默认行为</li>
        <li>stop：阻止事件继续传播（阻止事件冒泡）</li>
        <li>once：只处理一次事件</li>
    </ul>
    <h2>v-on:简写</h2>
    <p>使用@可以代替v-on:,于是v-on:click简写为@click</p>
    <main id="app">
        <button v-on:click="handleClick">按钮</button>
        <button v-on:click="handleClick($event)">按钮</button>
        <button v-on:click.once="handleClick2(person,$event)">按钮</button>
        <!-- 阻止a标签跳转的例子 -->
        <a href="https:www.baidu.com" @click.prevent>百度一下</a>
    </main>

</body>
<script src="../vue.min.js"></script>
<script>
    // 事件处理函数，最好定义在methods里面
    // function handleClick(e) {
    //     console.log(e);
    //     alert(1);
    // }

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                person: {
                    name: "Hydra",
                    sex: 35
                }
            }
        },
        methods: {
            handleClick(e) {
                console.log(e == window.event);
            },
            handleClick2(obj,e) {
                console.log(obj);
                console.log(e == window.event);
            }
        }
    });
</script>

</html>